<template>
  <div class="con">
    <div class="header">
      <div class="back" @click="back()">
        <img src="../assets/images/back.png" alt>
        <span>返回</span>
      </div>
      <p>收款注册 (企业)</p>
    </div>
    <div class="tep">
      <img src="../assets/images/tep.png" alt>
    </div>
    <div class="tep1">
      <div class="title1">
        <img src="../assets/images/icon1.png" alt>
        <p>上传企业法人资料</p>
      </div>
      <div class="upload">
        <div class="photo">
          <img src="../assets/images/upload.png" alt>
          <p>
            <span>*</span> 添加身份证
          </p>
          <p class="tip">(头像面)</p>
          <input type="file" id="file2" @change="upload('2')" accept="image/*" class="file">
          <img src alt class="smallimg" id="img2">
        </div>
        <div class="photo" style="margin-left:40px">
          <img src="../assets/images/upload.png" alt>
          <p>
            <span>*</span> 添加身份证
          </p>
          <p class="tip">(国徽面)</p>
          <input type="file" id="file3" @change="upload('3')" accept="image/*" class="file">
          <img src alt class="smallimg" id="img3">
        </div>
        <div class="photo" style="margin-left:40px">
          <img src="../assets/images/upload.png" alt>

          <p>
            <span>*</span> 法人签名照
          </p>
          <p class="tip">(白纸黑字手写后拍照)</p>
          <input type="file" id="file15" @change="upload('15')" accept="image/*" class="file">
          <img src alt class="smallimg" id="img15">
        </div>
      </div>

      <div class="info">
        <dl>
          <dt>
            <span>*</span>法人身份证号
          </dt>
          <dd>
            <input
              placeholder="请输入法人身份证号"
              v-model="identityNo"
              oninput="if(this.value.length>18) this.value = this.value.slice(0,18);"
            >
          </dd>
        </dl>
        <dl>
          <dt>
            <span>*</span>法人姓名
          </dt>
          <dd>
            <input v-model="legalRepresent" placeholder="请输入与身份证一致的法人姓名">
          </dd>
        </dl>
        <dl>
          <dt>
            <span>*</span>身份证号有效期
          </dt>
          <dd>
            <DatePicker
              placement="bottom-end"
              type="date"
              @on-change="identityEff()"
              v-model="identityEffDate"
              placeholder="请选择开始日期"
              style="width: 150px"
            ></DatePicker>&nbsp;---
            <DatePicker
              type="date"
              @on-change="identityVal()"
              v-model="identityValDate"
              placeholder="请选择到期日"
              style="width: 150px"
            ></DatePicker>
          </dd>
        </dl>

        <dl>
          <dt>
            <span>*</span>管理员姓名
          </dt>
          <dd>
            <input v-model="adminName" placeholder="请输入管理员姓名">
          </dd>
        </dl>
        <dl>
          <dt>
            <span>*</span>管理员手机号
          </dt>
          <dd>
            <input
              type="number"
              v-model="adminCellPhoneNo"
              placeholder="请输入管理员手机号"
              oninput="if(this.value.length>11) this.value = this.value.slice(0,11);"
            >
          </dd>
        </dl>
      </div>
    </div>

    <div class="tep1" style="margin-top:40px">
      <div class="title1">
        <img src="../assets/images/icon2.png" alt style="left:224px">
        <p>上传企业资料</p>
      </div>
      <div class="upload">
        <div class="photo">
          <img src="../assets/images/upload.png" alt>
          <p>
            <span>*</span> 营业执照
          </p>
          <p class="tip">(清晰展示文字)</p>
          <input type="file" id="file4" @change="upload('4')" accept="image/*" class="file">
          <img src alt class="smallimg" id="img4">
        </div>
        <div class="photo" style="margin-left:40px">
          <img src="../assets/images/upload.png" alt>
          <p>
            <span>*</span> 企业门面照
          </p>
          <p class="tip">(完整展示门头)</p>
          <input type="file" id="file5" @change="upload('5')" accept="image/*" class="file">
          <img src alt class="smallimg" id="img5">
        </div>
        <div class="photo" style="margin-left:40px">
          <img src="../assets/images/upload.png" alt>

          <p>
            <span>*</span> 企业内景照
          </p>
          <p class="tip">(真实反映经营场景)</p>
          <input type="file" id="file1" @change="upload('1')" accept="image/*" class="file">
          <img src alt class="smallimg" id="img1">
        </div>
      </div>

      <div class="info">
        <dl>
          <dt>
            <span>*</span> 营业执照号
          </dt>
          <dd>
            <input type="text" v-model="businessLicenseNo" placeholder="请输入营业执照号">
          </dd>
        </dl>
        <dl>
          <dt>
            <span>*</span> 营业执照企业全称
          </dt>
          <dd>
            <input type="text" v-model="merchantName" placeholder="请输入与营业执照一致的企业全称">
          </dd>
        </dl>
        <dl>
          <dt>
            <span>*</span>营业执照期限
          </dt>
          <dd>
            <DatePicker
              type="date"
              @on-change="businessLicenseEff()"
              v-model="businessLicenseEffDate"
              placeholder="请选择开始时间"
              style="width: 150px"
            ></DatePicker>&nbsp;---
            <DatePicker
              type="date"
              @on-change="businessLicenseVal()"
              v-model="businessLicenseValDate"
              placeholder="请选择到期时间"
              style="width: 150px"
            ></DatePicker>
          </dd>
        </dl>
        <dl>
          <dt>
            <span>*</span> 成立日期
          </dt>
          <dd>
            <DatePicker
              type="date"
              @on-change="establish()"
              v-model="establishDate"
              placeholder="请选择成立日期"
              style="width: 200px"
            ></DatePicker>
          </dd>
        </dl>
        <dl style="position:relative">
          <dt>
            <span>*</span> 行业代码
          </dt>
          <dd>
            <input type="text" v-model="industryCode" placeholder="请输入行业代码">
          </dd>
          <a
            href="https://pda.aixuepai.com.cn/industry.html"
            style="position:absolute;right:-80px;top:0px;width:100px;line-height:40px;color:#feae4d"
            target="_blank"
          >查询行业代码</a>
        </dl>
        <dl>
          <dt>
            <span>*</span>选择省市区
          </dt>
          <dd>
            <select @change="selectPro()" v-model="selectpro">
              <option value="1">选择省</option>
              <option
                v-for="(item,index) in province"
                :key="index"
                :value="item"
              >{{item.provinceName}}</option>
            </select>
            <select v-model="selectcity" @change="selectCity() ">
              <option value="1">选择市</option>
              <option v-for="(item,index) in city" :key="index" :value="item">{{item.cityName}}</option>
            </select>
            
            <select v-model="selectcounty" @change="selectCounty() ">
              <option value="1">选择区</option>
              <option v-for="(item,index) in county" :key="index" :value="item">{{item.countyName}}</option>
            </select>
          </dd>
        </dl>
        <dl>
          <dt>
            <span>*</span> 补全详细地址
          </dt>
          <dd>
            <input type="text" v-model="businessAddress" placeholder="请补全详细地址">
          </dd>
        </dl>
      </div>
    </div>

    <div class="tep1" style="margin-top:40px">
      <div class="title1">
        <img src="../assets/images/icon3.png" alt style="left:224px">
        <p>上传结算账号</p>
      </div>
      <div class="upload">
        <div class="photo">
          <img src="../assets/images/upload.png" alt>
          <p>
            <span>*</span> 结算账户照片
          </p>
          <p class="tip">(请上传)</p>
          <input type="file" id="file16" @change="upload('16')" accept="image/*" class="file">
          <img src alt class="smallimg" id="img16">
        </div>
        <div style="margin-left:200px;padding-top:20px;">
          <p style="color:#999;margin-bottom:10px">结算账户以下三选一</p>
          <p>开户许可证 &nbsp;&nbsp;&nbsp; 流水单 &nbsp;&nbsp;&nbsp; 印鉴卡</p>
        </div>
      </div>

      <div class="info">
        <dl>
          <dt>
            <span>*</span> 企业账号名
          </dt>
          <dd>
            <input type="text" v-model="bankAccountName" placeholder="请输入银行开通的企业账户名">
          </dd>
        </dl>

        <dl>
          <dt>
            <span>*</span> 企业账号
          </dt>
          <dd>
            <input type="text" v-model="bankAccountNo" placeholder="请输入银行账号">
          </dd>
        </dl>
        <dl>
          <dt>
            <span>*</span> 开户行名称
          </dt>
          <dd>
            <input @click="bankmodal()" v-model="bankName" placeholder="请选择开户行">
          </dd>
        </dl>
        <dl>
          <dt>
            <span>*</span> 支行名称
          </dt>
          <dd>
            <input type="text" v-model="branchBankName" placeholder="请输入银行支行名称">
          </dd>
        </dl>

        <dl style="position:relative">
          <dt>
            <span>*</span> 支行联行号
          </dt>
          <dd>
            <input type="text" v-model="subBankCode" placeholder="请输入支行联行号">
          </dd>
          <span
            @click="subBankmoal()"
            style="position:absolute;right:-80px;top:0px;width:100px;line-height:40px;color:#feae4d;font-size:14px;cursor: pointer;"
          >是什么</span>
        </dl>
         <dl>
          <dt>
            <span>*</span>银行预留手机号
          </dt>
          <dd>
            <input
              type="number"
              v-model="openBankPhoneNo"
              placeholder="请输入银行预留手机号"
              oninput="if(this.value.length>11) this.value = this.value.slice(0,11);"
            >
          </dd>
        </dl>
      </div>
    </div>

    <div class="btn" @click="ok()" id="ok">点击提交</div>
    <div style="height:100px"></div>

    <Modal title="请选择开户行" v-model="modal" :mask-closable="false">
      <Input
        suffix="ios-search"
        v-model="search"
        @keyup.native="searchbank()"
        placeholder="输入银行名"
        style="width: auto"
      />
      <div slot="footer"></div>
      <ul>
        <li
          v-for="(item,index) in bankData"
          :key="index"
          @click="choosebankName(item.bankName)"
        >{{item.bankName}}</li>
      </ul>
    </Modal>

    <Modal title="关于联行号" v-model="modal1" :mask-closable="false">
      <p>银行联行号是一个地区银行的唯一识别标志。用于人民银行所组织的大额支付系统、小额支付系统、城市商业银行汇票系统、全国支票影像系统（含一些城市的同城票据自动清分系统）等跨区域支付结算业务。由12位组成：3位银行代码+4位城市代码+4位银行编号+1位校验位。</p>
      <h2 style="text-align:center">可进入联行号网查询</h2>
      <a href="http://www.lianhanghao.com/" class="href" target="_blank">http://www.lianhanghao.com/</a>

      <div slot="footer"></div>
    </Modal>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      identityPosPath: "",
      identityNegPath: "",
      identityNo: "",
      legalRepresent: "",
      identityEffDate: "",
      identityValDate: "",
      electronicSignPath: "",
      adminName: "",
      adminCellPhoneNo: "",
      businessLicensePath: "",
      businessLicenseNo: "",
      merchantName: "",
      businessLicenseEffDate: "",
      businessLicenseValDate: "",
      establishDate: "",
      industryCode: "",
      storeFacadePath: "",
      storeBussinessPlacePath: "",
      bankCardPath: "",
      bankAccountName: "",
      bankAccountNo: "",
      bankName: "",
      branchBankName: "",
      subBankCode: "",
      openBankPhoneNo: "",
      timestamp: "",
      vendorId: "",
      modal: false,
      bankData: {},
      search: "",
      province: {},
      selectpro: "1",
      city: {},
      selectcity: "1",
      county: {},
      selectcounty: "1",
      businessAddress: "",
      provinceCode: "",
      cityCode: "",
      countyCode: "",
      modal1: false
    };
  },
  methods: {
    back() {
      let routeData = this.$router.resolve({
        name: "/"
      });
      window.open(routeData.href, "_blank");
    },
    ok() {
      var a1 = new Date(this.identityEffDate);
      var a2 = new Date(this.identityValDate);

      var b1 = new Date(this.businessLicenseEffDate);
      var b2 = new Date(this.businessLicenseValDate);

      var filterphone = /^1\d{10}$/;
      if (this.identityPosPath == "") {
        this.$Message.warning("请上传身份证正面");
      } else if (this.identityNegPath == "") {
        this.$Message.warning("请上传身份证反面");
      } else if (this.electronicSignPath == "") {
        this.$Message.warning("请上传法人签名照");
      } else if (this.identityNo == "") {
        this.$Message.warning("请输入法人身份证号");
      } else if (this.legalRepresent == "") {
        this.$Message.warning("请输入法人姓名");
      } else if (this.identityEffDate == "") {
        this.$Message.warning("请选择身份证开始日期");
      } else if (this.identityValDate == "") {
        this.$Message.warning("请选择身份证到期日");
      } else if (Number(a2.getTime(a2)) - Number(a1.getTime(a1)) < 0) {
        this.$Message.warning("身份证的到期日不能小于开始日");
      } else if (this.adminName == "") {
        this.$Message.warning("请输入管理员姓名");
      } else if (this.adminCellPhoneNo == "") {
        this.$Message.warning("请输入管理员手机号");
      } else if (filterphone.test(this.adminCellPhoneNo) == false) {
        this.$Message.warning("请输入正确的管理员手机号");
      } else if (this.businessLicensePath == "") {
        this.$Message.warning("请上传营业执照");
      } else if (this.storeFacadePath == "") {
        this.$Message.warning("请上传企业门面照");
      } else if (this.storeBussinessPlacePath == "") {
        this.$Message.warning("请上传企业内景照");
      } else if (this.businessLicenseNo == "") {
        this.$Message.warning("请输入营业执照号");
      } else if (this.merchantName == "") {
        this.$Message.warning("请输入企业全称");
      } else if (this.businessLicenseEffDate == "") {
        this.$Message.warning("请选择营业执照开始日");
      } else if (this.businessLicenseValDate == "") {
        this.$Message.warning("请选择营业执照到期日");
      } else if (Number(b2.getTime(b2)) - Number(b1.getTime(b1)) < 0) {
        this.$Message.warning("营业执照的到期日不能小于开始日");
      } else if (this.establishDate == "") {
        this.$Message.warning("请选择成立日期");
      } else if (this.industryCode == "") {
        this.$Message.warning("请输入行业代码");
      } else if (this.provinceCode == "") {
        this.$Message.warning("请选择省");
      } else if (this.countyCode == "") {
        this.$Message.warning("请选择市");
      } else if (this.cityCode == "") {
        this.$Message.warning("请选择区");
      } else if (this.businessAddress == "") {
        this.$Message.warning("请补全详细地址");
      } else if (this.bankCardPath == "") {
        this.$Message.warning("请上传结算账户照片");
      } else if (this.bankAccountName == "") {
        this.$Message.warning("请输入企业账户名");
      } else if (this.bankAccountNo == "") {
        this.$Message.warning("请输入企业账户");
      } else if (this.bankName == "") {
        this.$Message.warning("请选择开户行名称");
      } else if (this.branchBankName == "") {
        this.$Message.warning("请输入支行名称");
      } else if (this.subBankCode == "") {
        this.$Message.warning("请输入联行号");
      }else if (this.openBankPhoneNo == "") {
        this.$Message.warning("请输入银行预留手机号");
      } else if (filterphone.test(this.openBankPhoneNo) == false) {
        this.$Message.warning("请输入正确的银行预留手机号");
      } else {
        var tempwindow = window.open();
            document.getElementById("ok").disabled = true;
            document.getElementById("ok").classList.add("graybtn");
        this.axios({
          method: "post",
          url: `${
            this.siteUrl
          }/app/PABC/interactive/batchInteractiveByThird?appid=web.2018&timestamp=${
            this.timestamp
          }`,
          data: {
            merchantShortName: this.merchantName,
            cityCode: this.cityCode,
            legalRepresent: this.legalRepresent,
            bankAccountNo: this.bankAccountNo,
            bankName: this.bankName,
            merchantName: this.merchantName,
            industryCode: this.industryCode,
            identityNo: this.identityNo,
            adminCellPhoneNo: this.adminCellPhoneNo,
            businessAddress: this.businessAddress,
            merchantType: "10",
            identityEffDate: this.identityEffDate, //开始日
            identityValDate: this.identityValDate, //到期日
            businessLicenseEffDate: this.businessLicenseEffDate,
            businessLicenseValDate: this.businessLicenseValDate,
            establishDate: this.establishDate, //成立日
            bankAccountName: this.bankAccountName,
            provinceCode: this.provinceCode,
            thirdVendorId: this.vendorId,
            businessLicenseNo: this.businessLicenseNo,
            subBankCode: this.subBankCode,
            adminName: this.adminName,
            countyCode: this.countyCode,
            openBankPhoneNo: this.openBankPhoneNo,
            branchBankName: this.branchBankName,
            electronicSignPath: this.electronicSignPath,
            storeFacadePath: this.storeBussinessPlacePath,
            identityPosPath: this.identityPosPath,
            storeBussinessPlacePath: this.storeBussinessPlacePath,
            businessLicensePath: this.businessLicensePath,
            bankCardPath: this.bankCardPath,
            identityNegPath: this.identityNegPath
          }
        })
          .then(response => {
          console.log(response)
            if (response.data.success == 1) {
              this.$Message.success(response.data.message);
               document.getElementById("ok").disabled = false;
               document.getElementById("ok").classList.remove("graybtn");
                  var routeData = this.$router.resolve({
                  name: "/"
                });
                tempwindow.location.href=routeData.href;
            } else {
              this.$Message.warning(response.data.message);

               document.getElementById("ok").disabled = false;
               document.getElementById("ok").classList.remove("graybtn");
              tempwindow.close();
                // window.open(routeData.href, "_blank");
            }
          })
          .catch(function(error) {
            console.log(error);
          });
      }
    },
    /**
     * 营业执照照片路径 indexIndex  1
     * 法人身份证正面照路径imageIndex 2
     * 法人身份证反面照路径imageIndex 3
     * 店铺门面照 imageIndex 4
     * 商户经营场所或仓库照 imageIndex 5
     * 电子签名照 imageIndex 15
     * 结算卡照片 imageIndex 16
     * */
    upload(index) {
      var imagSize = document.getElementById("file" + index).files[0].size;

      if (imagSize > 1024 * 1024 * 3) {
        alert("您传的图片过大，超过3M了，请重新上传");
      } else {
        var param = new FormData();
        param.append("file", document.getElementById("file" + index).files[0]);
        this.axios({
          method: "post",
          url: `${
            this.siteUrl
          }/filecenter/PABC/uploadimage.do?appid=web.2018&format=json&timestamp=${
            this.timestamp
          }&imageIndex=${index}&vendorId=${this.vendorId}`,
          data: param
        })
          .then(response => {
            if (response.data.success == 1) {
              document.getElementById("img" + index).src =
                response.data.data.smallShowUrl;
              document.getElementById("img" + index).style.width = "140px";
              document.getElementById("img" + index).style.height = "90px";
              document.getElementById("img" + index).style.marginTop = "0px";
              document.getElementById("img" + index).style.opacity = "1";

              switch (index) {
                case "1":
                  this.businessLicensePath = response.data.data.path;
                  break;
                case "2":
                  this.identityPosPath = response.data.data.path;

                  break;
                case "3":
                  this.identityNegPath = response.data.data.path;
                  break;
                case "4":
                  this.storeFacadePath = response.data.data.path;
                  break;
                case "5":
                  this.storeBussinessPlacePath = response.data.data.path;
                  break;
                case "15":
                  this.electronicSignPath = response.data.data.path;
                  break;
                case "16":
                  this.bankCardPath = response.data.data.path;
                  break;

                default:
                  break;
              }
            } else {
              this.$Message.error(response.data.message);
            }
          })
          .catch(function(error) {
            console.log(error);
          });
      }
    },
    bankmodal() {
      this.modal = true;
      this.axios({
        method: "post",
        url: `${
          this.siteUrl
        }/app/PABC/vendorBank/getAllBank.do?appid=web.2018&format=json&timestamp=${
          this.timestamp
        }`
      })
        .then(response => {
          if (response.data.success == 1) {
            this.bankData = response.data.data;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    subBankmoal() {
      this.modal1 = true;
    },
    choosebankName(bankName) {
      this.bankName = bankName;

      this.modal = false;
    },
    searchbank() {
      console.log(this.search);
      this.axios({
        method: "post",
        url: `${
          this.siteUrl
        }/app/PABC/vendorBank/getAllBank.do?appid=web.2018&format=json&timestamp=${
          this.timestamp
        }`,
        data: {
          bankName: this.search
        }
      })
        .then(response => {
          if (response.data.success == 1) {
            this.bankData = response.data.data;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    selectPro() {
      this.provinceCode = this.selectpro.provinceCode;
      this.axios({
        method: "post",
        url: `${
          this.siteUrl
        }/web/division/city/list.do?appid=web.2018&timestamp=${this.timestamp}`,
        data: {
          provinceCode: this.selectpro.provinceCode
        }
      })
        .then(response => {
          if (response.data.success == 1) {
            this.city = response.data.data;
          } else {
            this.$Message.warning(response.data.message);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    selectCity() {
      this.cityCode = this.selectcity.cityCode;

      // 请求区列表
      this.axios({
        method: "post",
        url: `${
          this.siteUrl
        }/web/division/count/list.do?appid=web.2018&timestamp=${
          this.timestamp
        }`,
        data: {
          cityCode: this.selectcity.cityCode
        }
      })
        .then(response => {
          if (response.data.success == 1) {
            this.county = response.data.data;
          } else {
            this.$Message.warning(response.data.message);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    selectCounty() {
      this.countyCode = this.selectcounty.countyCode;
    },
    //获取日期
    establish() {
      var month = this.establishDate.getMonth() + 1;
      if (month < 10) {
        month = "0" + month;
      }
      var date = this.establishDate.getDate();
      if (date < 10) {
        date = "0" + date;
      }
      var yearS = `${this.establishDate.getFullYear()}`;
      this.establishDate = `${yearS}-${month}-${date}`;
    },
    businessLicenseEff() {
      var month = this.businessLicenseEffDate.getMonth() + 1;
      if (month < 10) {
        month = "0" + month;
      }
      var date = this.businessLicenseEffDate.getDate();
      if (date < 10) {
        date = "0" + date;
      }
      var yearS = `${this.businessLicenseEffDate.getFullYear()}`;
      this.businessLicenseEffDate = `${yearS}-${month}-${date}`;
    },
    businessLicenseVal() {
      var month = this.businessLicenseValDate.getMonth() + 1;
      if (month < 10) {
        month = "0" + month;
      }
      var date = this.businessLicenseValDate.getDate();
      if (date < 10) {
        date = "0" + date;
      }
      var yearS = `${this.businessLicenseValDate.getFullYear()}`;
      this.businessLicenseValDate = `${yearS}-${month}-${date}`;
    },
    identityEff() {
      var month = this.identityEffDate.getMonth() + 1;
      if (month < 10) {
        month = "0" + month;
      }
      var date = this.identityEffDate.getDate();
      if (date < 10) {
        date = "0" + date;
      }
      var yearS = `${this.identityEffDate.getFullYear()}`;
      this.identityEffDate = `${yearS}-${month}-${date}`;
    },
    identityVal() {
      var month = this.identityValDate.getMonth() + 1;
      if (month < 10) {
        month = "0" + month;
      }
      var date = this.identityValDate.getDate();
      if (date < 10) {
        date = "0" + date;
      }
      var yearS = `${this.identityValDate.getFullYear()}`;
      this.identityValDate = `${yearS}-${month}-${date}`;
    },


    // 生成32位随机数
    randomWord(randomFlag, min, max) {
      var str = "",
        range = min,
        arr = [
          "0",
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
          "9",
          "a",
          "b",
          "c",
          "d",
          "e",
          "f",
          "g",
          "h",
          "i",
          "j",
          "k",
          "l",
          "m",
          "n",
          "o",
          "p",
          "q",
          "r",
          "s",
          "t",
          "u",
          "v",
          "w",
          "x",
          "y",
          "z",
          "A",
          "B",
          "C",
          "D",
          "E",
          "F",
          "G",
          "H",
          "I",
          "J",
          "K",
          "L",
          "M",
          "N",
          "O",
          "P",
          "Q",
          "R",
          "S",
          "T",
          "U",
          "V",
          "W",
          "X",
          "Y",
          "Z"
        ];

      // 随机产生
      if (randomFlag) {
        range = Math.round(Math.random() * (max - min)) + min;
      }
      for (var i = 0; i < range; i++) {
        var pos = Math.round(Math.random() * (arr.length - 1));
        str += arr[pos];
      }
      return str;
    }
  },
  mounted() {


      this.$Message.config({
            top: 200,
            duration: 2
        });


    
    this.timestamp = Date.parse(new Date());
    this.vendorId = this.randomWord(false, 32);

    // this.vendorId = "01234567890123456789012345678901";
    // 请求省列表
    this.axios({
      method: "get",
      url: `${
        this.siteUrl
      }/web/division/province/list.do?appid=web.2018&timestamp=${
        this.timestamp
      }`
    })
      .then(response => {
        if (response.data.success == 1) {
          this.province = response.data.data;
        } else {
          this.$Message.warning(response.data.message);
        }
      })
      .catch(function(error) {
        console.log(error);
      });
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.con {
  width: 1024px;
  background: #fff9f2;
  margin: 0 auto;
}

.con .header {
  height: 100px;
  width: 100%;
  background: #feae4d;
  position: relative;
}
.con .header .back {
  width: 80px;
  height: 50px;
  position: absolute;
  left: 190px;
  top: 20px;
  cursor: pointer;
}
.con .header .back img {
  position: absolute;
  width: 10px;
  height: 18px;
  left: 0px;
  top: 20px;
}
.con .header .back span {
  font-size: 20px;
  position: absolute;
  left: 20px;
  top: 14px;
  color: #fff;
}
.con .header p {
  font-size: 30px;
  color: #fff;
  text-align: center;
  line-height: 100px;
}
.con .tep {
  width: 658px;
  height: 68px;
  margin: 56px auto;
}
.con .tep img {
  width: 100%;
}
.con .tep1 {
  width: 658px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0px 4px 11px 0px #fff9f2;
  padding-bottom: 20px;
}
.con .tep1 .title1 {
  width: 100%;
  height: 70px;
  background: #fafafa;
  position: relative;
}
.con .tep1 .title1 img {
  position: absolute;
  width: 24px;
  left: 200px;
  top: 22px;
}
.con .tep1 .title1 p {
  text-align: center;
  font-size: 24px;
  color: #333;
  line-height: 70px;
}
.con .tep1 .upload {
  width: 500px;
  margin: 0 auto;
  margin-top: 40px;
  height: 90px;
}

.con .tep1 .photo {
  width: 140px;
  height: 90px;
  border: 1px dashed #d4d4d4;
  border-radius: 7px;
  text-align: center;
  float: left;
  position: relative;
}
.con .tep1 .photo p {
  font-size: 14px;
  margin-top: 5px;
}
.con .tep1 .photo .tip {
  color: #d4d4d4;
  font-size: 12px;
  margin-top: 0px;
}
.con .tep1 .photo img {
  width: 20px;
  margin-top: 10px;
}
.con span {
  color: #ff0000;
  font-size: 16px;
  padding-right: 2px;
}
.con .file {
  position: absolute;
  width: 140px;
  height: 90px;
  background: red;
  left: 0px;
  top: 0px;
  opacity: 0;
  z-index: 999;
}
.con .smallimg {
  width: 140px;
  height: 90px;
  position: absolute;
  left: 0px;
  top: 0px;
  opacity: 0;
}

.con .info {
  width: 500px;
  margin: 0 auto;
  margin-top: 20px;
}

dl {
  width: 500px;
  margin-top: 10px;
  height: 50px;
}
dl dt {
  width: 160px;
  float: left;
  height: 40px;
  line-height: 40px;
}
dl dd {
  width: 340px;
  float: left;
  height: 40px;
  line-height: 40px;
}
dl dd input {
  width: 90%;
  height: 40px;
  border: 1px solid #d4d4d4;
  border-radius: 4px;
  text-indent: 10px;
}

.btn {
  width: 546px;
  margin: 0 auto;
  height: 70px;
  line-height: 70px;
  background: #f19e42;
  margin-top: 60px;
  text-align: center;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  font-size: 20px;
}
select {
  width: 30%;
}
input::-webkit-input-placeholder {
  color: #d4d4d4;
  font-size: 14px;
}

/* 模态框的ul样式 */
ul {
  height: 300px;
  overflow: auto;
}
ul li {
  line-height: 30px;
}
.href {
  display: block;
  text-align: center;
  color: #f19e42;
  font-size: 20px;
}

.ivu-date-picker >>> .ivu-select-dropdown {
  z-index: 99999;
}

    .graybtn {
            opacity: 0.5;
        }
</style>
